import React, { useState } from 'react';
import SelectAllOutlined from '@material-ui/icons/SelectAllOutlined';
import ToggleButton from '@material-ui/lab/ToggleButton';
import Divider from '@material-ui/core/Divider';
import MenuItem from '@material-ui/core/MenuItem';
import ListItemText from '@material-ui/core/ListItemText';
import IconButton from '@material-ui/core/IconButton';
import WidgetsOutlined from '@material-ui/icons/WidgetsOutlined';
import Menu from '@material-ui/core/Menu';
import Switch from '@material-ui/core/Switch';
import { Tip, is_empty } from '../../nui';
import { loc } from '../../local';

const Base = ({ hide=false, children, st, disabled=false, name, id, hcmd, select=false, className="", color="blue", onMouseDown, onMouseUp }) => {
    const sty = () => {
        if (disabled) {
            return `bg-${color}-600 rounded my-1 opacity-50 cursor-not-allowed`;
        }

        if (select) {
            return "bg-green-600 hover:bg-green-700 rounded my-1";
        }

        if (color === "transparent") {
            return `bg-transparent hover:bg-indigo-600 rounded my-1`;
        }

        return `bg-${color}-600 hover:bg-${color}-700 rounded my-1`;
    };

    if (hide) {
        return null;
    }

    return (
        <button
            className={`${sty()} ${className}`}
            name={name}
            id={id ? id : name}
            disabled={disabled}
            onClick={hcmd}
            onMouseDown={onMouseDown}
            onMouseUp={onMouseUp}>
            <div className={st}>
                {children}
            </div>
        </button>
    );
}

const Btn = (props) => (<Base st="py-2 px-5 ml-px text-white text-base" {...props}/>);

/* lst: [
 *     {key:"xx", val:"xx"},
 *     {key:"xx1", val:"xx2"}
 * ]
 * size: small, medium
*/
const BtMenu = ({ className, hcmd, lst, cur, title, id, size="small", icon=<WidgetsOutlined color="primary" size={24}/>, children, disabled }) => {
    const [anchorEl, setAnchorEl] = useState(null);
    const open = Boolean(anchorEl);

    const handleClick = (event) => setAnchorEl(event.currentTarget);

    const handleClose = (key) => {
        setAnchorEl(null);
        if (hcmd) {
            const f = lst.find(d => d.key === key);
            if (f) {
                hcmd(key);
            }
        }
    };

    if (is_empty(lst)) {
        return null;
    }

    const item = lst.map(d => {
        if (d.sub === "title") {
            return <div key={d.key} className="ml-2 mt-3 text-base font-bold">{d.val}</div>;
        }

        if (d.sub === "div") {
            return <Divider key={d.key}/>;
        }

        return (
            <MenuItem id={d.key} key={d.key} selected={d.key === cur} onClick={() => handleClose(d.key)}>
                <ListItemText className="ml-6" primary={d.val} secondary={d.sub || ""}/>
            </MenuItem>
        );
    });

    const getTip = () => {
        if (title) {
            return (
                <Tip title={title}>
                    <IconButton size={size} aria-label="more" aria-controls="long-menu" aria-haspopup="true" onClick={handleClick} id={id} disabled={disabled}>
                        {icon}
                        <span className="ml-2 items-center text-nowrap text-base">{children}</span>
                    </IconButton>
                </Tip>
            );
        }

        return (
            <IconButton size={size} aria-label="more" aria-controls="long-menu" aria-haspopup="true" onClick={handleClick} id={id} disabled={disabled}>
                {icon}
                <span className="ml-2 items-center text-nowrap text-base">{children}</span>
            </IconButton>
        );
    };

    return (
        <div className={className}>
            {getTip()}
            <Menu id="long-menu" anchorEl={anchorEl} keepMounted open={open} onClose={handleClose}>
                {item}
            </Menu>
        </div>
    );
};

const Ret = ({ hcmd, color="blue", name="", className }) => <Btn className={className} color={color} name={`ret${name}`} hcmd={hcmd}>{loc("fh")}</Btn>;

const BtTxt = ({ className, children, hcmd, name, disabled=false }) => {
    let st = `bg-transparent hover:bg-indigo-300 rounded ${className}`;
    let t_st = "px-2 text-blue-600 hover:text-blue-900 text-base";

    if (disabled) {
        st = `bg-transparent rounded ${className} cursor-not-allowed`;
        t_st = "px-2 text-blue-300 text-base cursor-not-allowed";
    }

    return (
        <button className={st} onClick={hcmd} name={name} id={name} disabled={disabled}>
            <div className={t_st}>
                {children}
            </div>
        </button>
    );
};

/* icon button with tooltip
 * wait when loading
 *
 * click: hcmd
 *
 * title: tooltip text
 */
const BtIcon = ({ children, hcmd=null, icon, title, id="btn", pos="top-start", size="medium", disabled }) => {
    const getView = () => {
        if (icon) {
            return (
                <IconButton onClick={hcmd} id={id} size={size} disabled={disabled}>
                    {icon}
                    <span className="ml-2 items-center text-nowrap text-white text-base">{children}</span>
                </IconButton>
            );
        }

        return (
            <IconButton onClick={hcmd} id={id} size={size} disabled={disabled}>
                <SelectAllOutlined style={{ color: "white" }}/>
                <span className="ml-2 items-center text-nowrap text-white text-base">{children}</span>
            </IconButton>
        );
    };

    return (
        <Tip title={title} pos={pos}>
            {getView()}
        </Tip>
    );
};

const BtToggle = ToggleButton;

const BtSwitch = ({ hcmd, checked, children, name="switch", disabled=false, className="ml-4" }) => (
    <div className={className}>
        <Switch
            name={name}
            disabled={disabled}
            checked={checked}
            onChange={({ target:{ checked } }) => hcmd(checked)}
            color="primary"
        />
        <span className="text-base">{children}</span>
    </div>
);

export {BtSwitch, BtToggle, BtIcon, BtTxt, Ret, BtMenu, Btn};
